// gultfile.js 制定各种任务

// 先安装，再引入
const gulp = require('gulp'),
	  htmlmin = require('gulp-htmlmin'),
	  cleancss = require("gulp-clean-css"),
	  uglify = require("gulp-uglify"),
	  // 为了能压缩ES6，引入gulp-babel
	  babel = require("gulp-babel"),
	  connect = require('gulp-connect'),
	  del = require('del'),
	  autoprefixer = require('gulp-autoprefixer'),
	  sass = require('gulp-sass'),
	   { createProxyMiddleware } = require('http-proxy-middleware')
	  

// 管理路径，把所有的路径集中用paths对象来管理，包括源文件路径和目标路径
const paths = {
	html: {
		src: 'src/**/*.html',
		dest: 'dist'
	},
	css: {
		src: 'src/css/**/*.scss',
		dest: 'dist/css'
	},
	js: {
		src:'src/js/**/*.js',
		dest: 'dist/js'
	},
	img: {
		src: 'src/img/**',
		dest: 'dist/img'
	},
	libs: {
		src: 'src/libs/**',
		dest: 'dist/libs'
	},
	api: {
		src: 'src/api/**',
		dest: 'dist/api'
	}
}

// 指定一个删除dist目录的任务，先删除再执行html，css，js等任务
const delDist = () => del('dist')

// 指定一个html任务： 压缩html的代码
const html = () => {
	// 首相找到这个html位置,然后管道压缩，然后管道通向目标压缩位置
	return gulp.src(paths.html.src)
		.pipe(htmlmin({
			removeComments: true, // 清除HTML注释
			collapseWhitespace: true, // 压缩HTML
			collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
			removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
			removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
			removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
			minifyJS: true, // 压缩页面JS
			minifyCSS: true // 压缩页面CSS 
		}))
		.pipe(gulp.dest(paths.html.dest))
		.pipe(connect.reload())
}

// 指定一个css任务 压缩css代码
const css = () => {
	return gulp.src(paths.css.src)
	// 先把sass转换成css
		.pipe(sass())
	// 自动补全前缀
		.pipe(autoprefixer({
			// 有些不会自动加，测试animation会自动加
			presets: ['@babel/env']
		}))
		// 再压缩
		.pipe(cleancss())
		.pipe(gulp.dest(paths.css.dest))
		.pipe(connect.reload())
}

// 指定一个js任务  --压缩，混淆js
const js = () => {
	return gulp.src(paths.js.src)
	
		.pipe(babel({
			presets: ['@babel/env']
		}))
		// 先注释，方便查错
		// .pipe(uglify())
		.pipe(gulp.dest(paths.js.dest))
		.pipe(connect.reload())
}

// img 任务 直接将src下的img全部通过管道pipe给dist的对应位置
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))

// libs任务
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

// 指定watch任务：监听代码（html,css,js）的改变，自动重启对应的服务
const watch = () => {
	// 监听html文件，当文件改变，就自动重启html服务
	gulp.watch(paths.html.src, html)
	gulp.watch(paths.css.src, css)
	gulp.watch(paths.js.src, js)
}

// 指定api任务
const api = () => gulp.src(paths.api.src).pipe(gulp.dest(paths.api.dest))

// 指定server服务，  开启本地服务器
// 使用node的http模块开启本地服务器，但已有包gulp-connect可以实现，不用自己写
const server = () => {
	connect.server({
		// 指定根目录为dist，在项目中以/开头，代表dist，写绝对路径
		root:'dist',
		//    localhost:4333/
		port: 4333,
		// livereload设置为true表示支持实时更新，
		// 在需要实时更新的任务中通过pipe添加connect.reload()即可实现
		livereload: true,
		
		// 代理跨域：把以 /v1 开头的请求代理到拼多多的接口
		middleware () {
			return [
				createProxyMiddleware('/api', {
					target: "https://apiv2.pinduoduo.com",
					changeOrigin: true
				})
			]
		}
		
		
		
	})
}


// 最后将指定任务导出
// default指默认任务
//  series 是同步执行代码，运行有先后，这里指先执行删除dist目录的任务，
	// 再异步（parallel）执行html，css，js等等的任务
module.exports.default = gulp.series(delDist, gulp.parallel(html,css,js,img,libs,watch,api,server))


